<!--
 * @Author: Soulmate
 * @Date: 2023-11-15 08:53:34
 * @LastEditTime: 2023-11-16 17:12:42
 * @LastEditors: Soulmate
 * @Description: 
 * @FilePath: \electron-app\src\components\HelloWorld.vue
 * 版权声明
-->
<script setup lang="ts">
import { ref } from 'vue';
const { ipcRenderer } = window.require('electron');

const props = defineProps<{ msg: string }>();

const count = ref(0);

const toggleDarkMode = async () => {
  await ipcRenderer.invoke('dark-mode:toggle');
};

const resetSystemMode = async () => {
  await ipcRenderer.invoke('dark-mode:system');
};

const checkNoticeMsg = () => {
  let option = {
    title: '消息通知',
    body: 'electron消息通知弹出',
    icon: '../../public/electron.png', // 图标
  };
  new window.Notification(option.title, option);
};
</script>

<template>
  <h1>{{ msg }}</h1>
  {{ props.msg }}
  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
    <button @click="toggleDarkMode">Toggle Dark Mode1</button>
    <button @click="resetSystemMode">Reset to System Theme</button>
    <button @click="checkNoticeMsg">Check Notice Msg</button>
  </div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
